<template>
  <div class="dashboard-editor-container" style="overflow: auto;background-color: white">

<!--    <panel-group @handleSetLineChartData="handleSetLineChartData" />-->

    <el-card class="box-card" style="margin-top: 15px;" v-for="(item,index) in processData">
      <div slot="header" class="clearfix">
        <span style="font-weight: bolder">{{item.processName}}</span>
      </div>
      <div v-for="(items,indexs) in item.list"
        class="item" @click="openProcess(items)"
      >
        <div  class="progress" :style="{backgroundColor: '#004694',width:'45px',height:'45px',left:'18px'}">
           <el-image style="height: 30px;width: 30px;top:4px" :src="items.processIcon"></el-image>
        </div>
        <div style="color: black;text-align: center">{{items.processName}}</div>
      </div>

    </el-card>
    <el-dialog
      :title="selectData.processName"
      :visible.sync="dialogVisible"
      width="70%"
      height="500px"
     >
<!--    <iframe width="100%" height="500" :src="selectData.docUrl"></iframe>-->

      <span slot="footer" class="dialog-footer">
        <el-row :gutter="20">
          <el-col :span="8">
              <el-checkbox v-model="checkbox1" label="我已了解此流程" border></el-checkbox>
          </el-col>
            <el-col :span="16">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button :disabled="btn_status" type="primary" @click="btn_openProcess">确 定</el-button>
            </el-col>
        </el-row>

  </span>
    </el-dialog>
  </div>
</template>

<script>
  import PanelGroup from '../../dashboard/PanelGroup'
  import Shortcut from '../../dashboard/Shortcut'
  import LineChart from '../../dashboard/LineChart'
  import RaddarChart from '../../dashboard/RaddarChart'
  import PieChart from '../../dashboard/PieChart'
  import BarChart from '../../dashboard/BarChart'
  import {
    getProcessByUserId,bpmList
  } from "@/api/system/process";


  const lineChartData = {
    newVisitis: {
      expectedData: [100, 120, 161, 134, 105, 160, 165],
      actualData: [120, 82, 91, 154, 162, 140, 145]
    },
    messages: {
      expectedData: [200, 192, 120, 144, 160, 130, 140],
      actualData: [180, 160, 151, 106, 145, 150, 130]
    },
    purchases: {
      expectedData: [80, 100, 121, 104, 105, 90, 100],
      actualData: [120, 90, 100, 138, 142, 130, 130]
    },
    shoppings: {
      expectedData: [130, 140, 141, 142, 145, 150, 160],
      actualData: [120, 82, 91, 154, 162, 140, 130]
    }
  }

  export default {
    name: 'Index',
    components: {
      PanelGroup,
      Shortcut,
      LineChart,
      RaddarChart,
      PieChart,
      BarChart
    },
    data() {
      return {
        queryParams: {
          current: 1,
          size: 10,
          name: undefined,
          type: undefined,
          status: undefined,
          createTime: undefined,

        },
        userAccount:'',
        selectData:{},
        checkbox1:false,
        btn_status:true,
        iframeUrl:'',
        bpmList:[],
        lineChartData: lineChartData.newVisitis,
        dialogVisible:false,
        processData:[],
        url:""
      }
    },
    methods: {
      getList(){
        getProcessByUserId(this.queryParams).then(response => {
          this.processData=response.data;
        });

      },
      getBPMList(){
        bpmList().then(response => {
            this.bpmList=response.data;
        });
      },
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      },
      openProcess(data){
        window.open(data.processUrl+"&logintoken="+this.userAccount);
        // this.dialogVisible=true;
        // this.selectData=data;
      },
      btn_openProcess(){
        window.open(this.selectData.processUrl+"&logintoken="+this.userAccount);
        //this.dialogVisible=false;
      }
    },
    created() {
      this.getList();
      this.userAccount= this.$store.state.user.name;

    },
    watch:{
      'checkbox1':{
        handler(val,oldVal) {
           if(val==true){
                this.btn_status=false;
           }else{
              this.btn_status=true;
           }
        },
        immediate: true
         }
    }
  }
</script>

<style lang="scss" scoped>
   .progress{
     border-radius: inherit;
     margin-left: 18px;
   }
  .dashboard-editor-container {
    padding: 5px;
    background-color: rgb(240, 242, 245);
    position: relative;
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
  .el-card {
    margin-bottom: 16px;
  }

  .box-card .el-card__body {
    padding: 0;
    overflow-x: auto;

    .item {
      width: 120px;
      float: left;
      margin: 10px 20px;
      color: white;
      text-align: center;
      padding: 8px;
      border-radius: 8px;
      cursor: pointer;

      svg {
        font-size: 64px;
        margin-bottom: 12px;
      }
    }
  }
</style>
